<template>
	<!-- 电访填写回访内容 -->
	<view>
		<view class="tab">
			<u-sticky bgColor="#fff">
				<u-tabs :list="list1" lineWidth="70" lineColor="#0C68FD" @click="changeTab" :activeStyle="{
				    color: '#0C68FD',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				    color: '#606266',
				    transform: 'scale(1)'
				}" itemStyle="padding-left: 45px; padding-right: 35px; height: 34px;"></u-tabs>
			</u-sticky>
		</view>

		<!-- 表单 -->
		<view class="form">

			<view class="form-bottom">
				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:90rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt" style="width:140rpx">
						居住环境
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)" @click="click(1)">
						<u--input v-model="live" disabled disabledColor="#ffffff" placeholder="请选择" border="none"
							inputAlign="right">
						</u--input>
					</view>
				</view>
				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:90rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt" style="width:140rpx">
						个人卫生
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)" @click="click(2)">
						<u--input v-model="hygiene" disabled disabledColor="#ffffff" placeholder="请选择" border="none"
							inputAlign="right">
						</u--input>
					</view>
				</view>
				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:90rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt" style="width:140rpx">
						身体状况
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)" @click="click(3)">
						<u--input v-model="body" disabled disabledColor="#ffffff" placeholder="请选择" border="none"
							inputAlign="right">
						</u--input>
					</view>
				</view>


				<!-- 				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:90rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt" style="width:140rpx">
						回访方式
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)" @click="click(4)">
						<u--input v-model="type" disabled disabledColor="#ffffff" placeholder="请选择" border="none"
							inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</view>
				</view> -->


				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:120rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt"
						style="width:140rpx;display:flex;align-items: flex-start;height:120rpx;padding-top:45rpx">
						需求
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)">
						<textarea style="height:120rpx;padding-top:40rpx;" v-model="need" placeholder="请输入需求"
							placeholder-style="color: #C0C6DB" border="none"></textarea>
					</view>
				</view>
				<view
					style="display:flex;justify-content: space-between;align-items: center;width:100%;height:120rpx;border-bottom:1rpx solid #F2F2F3">
					<view class="lt"
						style="width:140rpx;display:flex;align-items: flex-start;height:120rpx;padding-top:45rpx">
						其他
					</view>
					<view class="rt" style="width:calc(100% - 140rpx)">
						<textarea style="height:120rpx;padding-top:40rpx;" v-model="other" placeholder="请输入其他"
							placeholder-style="color: #C0C6DB" border="none"></textarea>
					</view>
				</view>

			</view>
			<view class="upload">
				<!-- 凭证上传 -->
				<view class="VisitorInformation_list">
					<view class="">
						<view class="certificate">
							回访凭证
						</view>
						<!-- <view class="VisitorInformation_list_image">
							<u-upload multiple :fileList="fileList1" @afterRead="afterRead" name="1" :maxCount="10"
								:deletable="false" width="180" height="180"></u-upload>
						</view>
						<view class="uploadtext">
							<text>请上传图片或本地视频，最多10张</text>
						</view> -->
						<view class="Voice_input">
							<view class="Image_box">
								<div class="box" v-for="(item,index) in imgs" :key='index' @click="clickImg(index)">
									<image :src="baseUrl+item" mode=""></image>
								</div>
								<div class="box" id='fileUploadBtn' @click="chooseImgs()" v-show="imgs.length < 10">
									<img class='upload_img' src="../../static/index/zengjia.png" alt="">
								</div>
							</view>

						</view>
						<view class="uploadtext">
							<text>请上传图片或本地视频，最多10张</text>
						</view>
					</view>
				</view>
			</view>

			<u-action-sheet :show="showLiving" :actions="actionsliving" title="请选择居住环境" @close="showLiving = false"
				@select="livingSelect">
			</u-action-sheet>
			<u-action-sheet :show="showHealth" :actions="actionshealth" title="请选择身体状况" @close="showHealth = false"
				@select="healthSelect">
			</u-action-sheet>
			<u-action-sheet :show="showPersonal" :actions="actionspersonal" title="请选择个人卫生"
				@close="showPersonal = false" @select="personalSelect">
			</u-action-sheet>
			<!-- <u-action-sheet :show="showReturnvisit" :actions="actionsReturnvisit" title="请选择回访方式"
				@close="showReturnvisit = false" @select="returnVisitSelect">
			</u-action-sheet> -->
		</view>

		<view class="button">
			<u-button type="primary" shape="circle" @click="submit">提交</u-button>
		</view>

		<!-- <view class="button">
			<u-button type="primary" shape="circle" @click="test">测试</u-button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSex: false,
				showLiving: false,
				showHealth: false,
				showPersonal: false,
				showReturnvisit: false,
				valueposition: true,
				live: '',
				hygiene: '',
				need: '',
				other: '',
				imgs: [],
				body: '',
				type: '',
				fileList1: [],
				villager_id: '',
				// 选择选性别
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},

				],
				actionsliving: [{
						name: '良好',
					},
					{
						name: '一般',
					},
					{
						name: '差',
					},
				],
				actionshealth: [{
						name: '良好',
					},
					{
						name: '一般',
					},
					{
						name: '差',
					},
				],
				actionspersonal: [{
						name: '良好',
					},
					{
						name: '一般',
					},
					{
						name: '差',
					},
				],
				// actionsReturnvisit: [{
				// 		name: '电访',
				// 		id: 1
				// 	},
				// 	{
				// 		name: '面访',
				// 		id: 2
				// 	},
				// ],
				list1: [{
					name: '电访',
					id: 1
				}, {
					name: '面访',
					id: 2,

				}],
				type: 1,
				imgList: [],
				baseUrl: this.baseUrl


			}

		},
		onLoad(option) {
			this.villager_id = option.villager_id;
		},
		methods: {
			chooseImgs() {

				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						let apiURl = '';
						// #ifdef APP-PLUS
						apiURl = this.baseUrl + '/api/upload/fileUpload'
						// #endif
						// #ifdef H5
						apiURl = '/api/api/upload/fileUpload'
						// #endif
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: apiURl, //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'image',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									let result = eval("(" + uploadFileRes.data.replace(/\\u/g,
										"%u") + ")");
									console.log(result);
									if (result.code == 1) {
										this.imgs.push(result.data.path)

									}
								}
							});
						}
						console.log(this.imgs)
					}
				});

			},
			clickImg(index) {
				let imgsArray = [];
				for (let i = 0; i < this.imgs.length; i++) {
					imgsArray.push(this.baseUrl + this.imgs[i]);
				}
				uni.previewImage({
					current: index,
					urls: imgsArray,
					indicator: 'number',
					loop: true
				});

			},
			changeTab(item) {

				this.type = item.id;
				console.log(this.type)
			},
			click(type) {
				if (type == 1) {
					this.showLiving = true;
				}

				if (type == 2) {
					this.showPersonal = true;
				}
				if (type == 3) {
					this.showHealth = true;
				}
				if (type == 4) {
					this.showReturnvisit = true;
				}
			},

			livingSelect(e) {
				console.log(e)
				this.live = e.name
			},
			healthSelect(e) {
				console.log(e)
				this.body = e.name
			},
			personalSelect(e) {
				console.log(e)
				this.hygiene = e.name
			},
			returnVisitSelect(e) {
				console.log(e)
				this.type = e.id;
			},




			// // 新增图片
			// async afterRead(event) {
			// 	console.log(event);
			// 	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

			// 	let lists = [].concat(event.file)
			// 	let fileListLen = this[`fileList${event.name}`].length
			// 	lists.map((item) => {
			// 		this[`fileList${event.name}`].push({
			// 			...item,
			// 			// status: 'uploading',
			// 			// message: '上传中'
			// 		})
			// 	})
			// 	for (let i = 0; i < lists.length; i++) {
			// 		const result = await this.uploadFilePromise(lists[i].url)
			// 		let item = this[`fileList${event.name}`][fileListLen]
			// 		this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
			// 			status: 'success',
			// 			message: '',
			// 			url: result
			// 		}))
			// 		fileListLen++
			// 	}
			// },
			// uploadFilePromise(url) {

			// 	return new Promise((resolve, reject) => {
			// 		let apiURl = '';
			// 		// #ifdef APP-PLUS
			// 		apiURl = this.baseUrl + '/api/upload/fileUpload'
			// 		// #endif
			// 		// #ifdef H5
			// 		apiURl = '/api/api/upload/fileUpload'
			// 		// #endif
			// 		uni.uploadFile({
			// 			url: apiURl, // 仅为示例，非真实的接口地址
			// 			filePath: url,
			// 			name: 'image',
			// 			formData: {
			// 				user: 'test'
			// 			},
			// 			success: (res) => {
			// 				let result = eval("(" + res.data.replace(/\\u/g,
			// 					"%u") + ")");
			// 				console.log(result);
			// 				if (result.code == 1) {
			// 					this.imgs.push(result.data.path)
			// 					console.log(this.imgs)
			// 				}
			// 			}
			// 		});
			// 	})
			// },



			// 提交表单
			submit() {
				if (!this.live) {
					this.toastMsg("请选择居住环境");
					return;
				}
				if (!this.hygiene) {
					this.toastMsg("请选择个人卫生");
					return;
				}
				if (!this.body) {
					this.toastMsg("请选择身体状况");
					return;
				}
				if (!this.type) {
					this.toastMsg("请选择回访方式");
					return;
				}

				if (!this.need) {
					this.toastMsg("请输入需求");
					return;
				}
				if (!this.other) {
					this.toastMsg("请输入其他");
					return;
				}
				if (!this.imgs) {
					this.toastMsg("请输入详细地址");
					return;
				}
				let obj = {};
				obj.villager_id = this.villager_id;
				obj.type = this.type;
				obj.live = this.live;
				obj.hygiene = this.hygiene;
				obj.body = this.body;
				obj.need = this.need;
				obj.other = this.other;
				obj.imgs = this.imgs.toString();


				this.$api.post('/api/villagers/addvillagersRecord', obj).then((res) => {

					if (res.code == 1) {

						this.LoadingMsg(res.msg);
						setTimeout(() => {
							uni.hideLoading();

							uni.switchTab({
								url: '../index/index'
							})
						}, 1500);
					} else {
						this.toastMsg(res.msg);
					}
				})

			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #EFF1F5;
	}

	/deep/.uicon-camera-fill {
		font-size: 60rpx !important;
	}

	/deep/.u-tabs__wrapper__nav__line {
		left: 44rpx;
	}
</style>

<style lang="scss" scoped>
	.certificate {
		margin-bottom: 30rpx;
	}

	/* 上传图片 */
	.Voice_input {
		border-bottom: 1px solid rgba(215, 215, 215, 0.50);
	}

	.Image_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 15px;
		padding-bottom: 15px;
	}

	.box {
		width: 205rpx;
		height: 205rpx;
		border: 1rpx solid #dedede;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.box image {
		width: 100%;
		height: 100%;
	}

	.tab {
		display: flex;
		justify-content: center;
		background-color: #fff;
	}

	.form {
		margin: 30rpx;

		.form-top {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
		}

		.form-bottom {
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			padding: 20rpx;

			.rt {
				input {
					width: 100%;
				}

				textarea {
					width: 100%;
				}
			}
		}
	}


	.VisitorInformation_list {
		background-color: #FFFFFF;
		padding: 0 30rpx 30rpx 30rpx;

		// display: flex;
		color: #666;
		// justify-content: space-between;

		._select {
			display: flex;
			color: #AAAAAA;
			font-size: 30rpx;

			view {
				margin-right: 6rpx;
			}
		}

		.VisitorInformation_list_image {
			margin: 60rx 0 0 0;
			display: inline-block;
			padding-right: 20rpx;
		}

	}

	.upload {
		background-color: #FFFFFF;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom: none;
	}

	.uploadtext {
		color: #CCCCCC;
		font-size: 26rpx;
	}

	.positions {
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		margin: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		color: #666666;
		font-size: 30rpx;

		view:last-child {
			padding-top: 6rpx;
		}
	}

	.button {
		margin: 30rpx;

		.u-button {
			background-color: #0C68FD;
		}
	}
</style>
